<template>
  <div class="el-page el-main el-position">
    <div class="search-box" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">送风方式：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.aerate" placeholder="请选择送风方式">
              <el-option v-for="item in windList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input class="shadowInput" v-model="form.velocity" clearable size="mini"
              placeholder="请输入送风方式"></el-input> -->
          </div>
          <div class="searchCard">
            <span class="searchText">气流：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.airflow" placeholder="请选择气流">
              <el-option v-for="item in airList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input class="shadowInput" v-model="form.airy" clearable size="mini" placeholder="请输入气流"></el-input> -->
          </div>
          <div class="searchCard">
            <span class="searchText">农场名称：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.farmCode" placeholder="请选择农场">
              <el-option v-for="item in farmList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">仓号：</span>
            <el-input class="shadowInput" v-model="form.wareNumber" clearable size="mini"
              placeholder="请输入仓号"></el-input>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="operate-box">
      <div class="button-box">
        <el-button v-if="hasIdentifier('Airy.add')" class="addButton" type="primary" icon="el-icon-plus" size="mini"
          @click="handleShowAddDialog">新增</el-button>
        <el-popconfirm v-if="hasIdentifier('Airy.delete')" style="margin:0 10px;" confirm-button-text='确定'
          cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除所勾选的数据吗？" @confirm="handleDel">
          <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
        </el-popconfirm>
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleSelectAll">全选</el-button>
        <el-button v-if="hasIdentifier('Airy.import')" type="warning" plain icon="el-icon-download" size="mini"
          @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-refresh" circle @click="getList"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-menu" circle
            @click="handleShowTransfer"></el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :delList.sync="delList">
      </TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>
    <!-- 新增弹框 -->
    <AddPopu ref="addPopu" :showDialog.sync="showAddDialog" @handleRefresh="getList"></AddPopu>
    <!-- 显隐列 -->
    <TransferCom :showDialog.sync="showTransferDialog" :list.sync="tableHead"></TransferCom>
  </div>
</template>

<script>
import './scss/index.scss'
import { getWindList, delWindList, importApi } from '@/api/wind'
import { unitSelectApi } from '@/api/dashhboard'
import { selectApi } from '@/api/select'
import { fileExport } from '@/utils/methods'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import AddPopu from './dialog/AddPopu.vue'
import TransferCom from '@/components/TransferCom'
import { mapGetters } from 'vuex';
export default {
  components: {
    TableCom,
    PageCom,
    AddPopu,
    TransferCom
  },
  data() {
    return {
      form: {
        "farmCode": this.$farmCode,
        teamCode: this.$teamCode,
        "wareNumber": "",
        "airflow": "",
        "aerate": "",
      },
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '农场名称',
        prop: 'farmName'
      }, {
        title: '生产队名称',
        prop: 'teamName'
      }, {
        title: '仓号',
        prop: 'wareNumber'
      }, {
        title: '通风时间(小时)',
        prop: 'time'
      }, {
        title: '风速(m/s)',
        prop: 'velocity'
      }, {
        title: '通风目的',
        prop: 'airy'
      }, {
        title: '送风方式',
        prop: 'aerate'
      }, {
        title: '气流',
        prop: 'airflow'
      }, {
        title: '填写人姓名',
        prop: 'createUser'
      }, {
        title: '手机号',
        prop: 'phone'
      }, {
        title: '添加时间',
        prop: 'createTime'
      }],
      tableData: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          this.$refs.addPopu.changeFram(row.farmCode)
          this.$refs.addPopu.handleGetairy(row.id)
          this.showAddDialog = true
        },
        flag: () => {
          return this.hasIdentifier("Airy.update")
        }
      }],
      farmList: [],
      windList: [],
      airList: [],
      isDropdownVisible: false,
      timeList: [],
      showAddDialog: false,
      delList: [],
      showTransferDialog: false
    }
  },
  computed: {
    ...mapGetters(['hasIdentifier']), // 映射 getters
  },
  methods: {
    // 显示隐藏下拉框
    toggleDropdown() {
      const arrow = document.getElementById('arrow');
      const search = document.getElementById('search-box');
      if (!this.isDropdownVisible) {
        arrow.classList.add('down');
        search.classList.add('search-box-height');
      } else {
        arrow.classList.remove('down');
        search.classList.remove('search-box-height');
      }
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 获取下拉框
    async handleGetSelect() {
      let res = await Promise.all([
        selectApi({ type: 'farm_type' }),
        selectApi({ type: 'aerate_type' }),
        selectApi({ type: 'airflow' }),
      ])
      if (this.$status == '0') {
        let res = await unitSelectApi()
        this.farmList = res.data
      }
      if (this.$status != 0) {
        this.farmList = res[0].data.dictItemList.filter(item => item.value == this.$farmCode)
      }
      this.windList = res[1].data.dictItemList
      this.airList = res[2].data.dictItemList
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    // 重置
    handleReset() {
      this.form = {
        carName: '',
        carType: '',
        createUser: '',
        startTime: '',
        endTime: '',
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      const { data } = await getWindList(this.form, this.pageData)
      this.total = data.total;
      this.tableData = data.records;
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    handleShowAddDialog() {
      this.$refs.addPopu.ruleForm.createTime = new Date().getTime()
      this.$refs.addPopu.handleGetInfo()
      this.showAddDialog = true
    },
    // 删除
    async handleDel() {
      let { code } = await delWindList(this.delList)
      if (code == 0) {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }
      this.getList()
    },
    // 导出
    async handleExport() {
      let res = await importApi({ ...this.form, ids: this.delList })
      fileExport(res, '通风管理')
    },
    // 显隐列弹框
    handleShowTransfer() {
      this.showTransferDialog = true
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}
</style>
